<template>
  <div class="specil-wrap">
    <!-- 专题页banner -->
    <div class="specil-banner">
      <no-ssr>
        <el-carousel class="carousel">
          <el-carousel-item v-for="(item, index) in specilSlideList" :key="index" class="carousel-item">
            <div :style="{background:`url(${item.imgUrl}) no-repeat center`}" style="height:947px">
            </div>
          </el-carousel-item>
        </el-carousel>
      </no-ssr>
    </div>
    <div class="margin-align">
      <!-- 智能制造相关 -->
      <div class="intelligent-makez">
        <div class="intelligent-make" v-for="(item,index) in intelligentMakePic" :key="item.title">
          <div class="main-title main-title-margin text-left">{{item.title}}</div>
          <!-- 第二张特殊处理 -->
          <div v-if="index===1" class="text-pic">
            <div class="text">基于数字化战略规划全景模型，进行课程结构的搭建</div>
            <img :src="item.imgUrl">
          </div>
          <img :src="item.imgUrl" class="intelligent-pic" v-else>
        </div>
      </div>
      <!-- 智能制造课程体系总体模型 -->
      <div class="intelligent-modal">
        <div class="main-title main-title-margin text-left">智能制造课程体系总体模型</div>
        <img src="/img/talents/specil/imodal.png" class="intelligent-modal-pic" @click="goOpenClass">
      </div>
      <!-- 项目背景&一期课程来源以及整体课程规划 -->
      <div class="background-plan">
        <!-- 项目背景 -->
        <div class="program-background">
          <div class="main-title main-title-margin text-left">{{specilProgramBackground.title}}</div>
          <div class="background-info text-left">{{specilProgramBackground.backgroundinfo1}}<span>{{specilProgramBackground.backgroundinfo2}}</span></div>
        </div>
        <!-- 一期课程来源以及整体课程规划 -->
        <div class="course-plan">
          <div class="main-title main-title-margin">{{specilPlan.title}}</div>
          <div class="plan">
            <div class="s-title">{{specilPlan.smallTile}}</div>
            <div class="plan-info">{{specilPlan.plan}}</div>
            <div class="plan-pic">
              <img :src="specilPlan.imgUrl">
            </div>
          </div>
        </div>
      </div>
      <!-- 行业课程清单（一期） -->
      <div class="Industry-courses">
        <div class="main-title main-title-margin text-left">行业课程清单（一期）</div>
        <!-- <industrycourse-list></industrycourse-list> -->
        <img src="/img/talents/specil/course-form.png" class="Industry-courses-pic">
      </div>
      <!-- 里程碑计划 -->
      <div class="milestore-plan">
        <div class="main-title main-title-margin">里程碑计划</div>
        <div class="milestore-intro">厦门市委组织部、厦门市人力资源和社会保障局、厦门市工业和信息化局与华为公司及其合作伙伴福建国科信息科技公司签署三方“产业转型升级人才培养基地合作框架协议”</div>
        <div class="milestore-pic">
          <img src="/img/talents/specil/milestore.png">
        </div>
      </div>
      <!-- 厦门产业数字化人才培养基地成果展示数据 -->
      <div class="show-data">
        <div class="main-title main-title-margin">厦门产业数字化人才培养基地成果展示数据</div>
        <div class="data-show-pic">
          <img :src="item" v-for="item in talentDataPic" :key="item">
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import talents from '@/api/talents'
import IndustrycourseList from '@/components/talents/industrycourseList' // 行业课程清单（一期）
export default {
  layout: 'teach',
  data () {
    return {
      specilSlideList: talents.specilSlideList, // 专题页banner
      intelligentMakePic: talents.intelligentMakePic, // 智能制造相关      
      specilProgramBackground: talents.specilProgramBackground, // 项目背景
      specilPlan: talents.specilPlan, // 专题页-一期课程来源以及整体课程规划
      talentDataPic: talents.talentDataPic // 厦门产业数字化人才培养基地成果展示数据
    }
  },
  components: {
    IndustrycourseList
  },
  methods: {
    goOpenClass () {
      const url = 'https://edu.gxj.xm.gov.cn/auth-login?r=' + 'L2V4Y2VsbGVudC1jb3Vyc2U='
      window.open(url,'_blank')
    }
  }
}
</script>
<style lang="stylus" scoped>
.specil-wrap {
  padding-bottom: 60px;
  background-color: #F6F6F6
  .specil-banner {
    height: 947px
    .carousel {
      /deep/ .el-carousel__container {
        height: 947px
      }
      /deep/ .el-carousel__indicators--horizontal {
        bottom:8px
      }
      /deep/ .el-carousel__button {
        width: 40px;
        height: 6px
      }
    }
  }
  .intelligent-makez {
    display: inline-block;
    margin-top: 30px
    .intelligent-make {
      float: left;
      width: 345px;
      height: 530px;
      background: #FFFFFF;
      border-radius: 16px;
      margin-right: 20px;
      text-align: center;
      &:first-child {
        width: 470px;
        img {
          width: 430px;
        }
      }
      &:last-child {
        margin-right: 0
      }
      .intelligent-pic {
        width: 306px;
        height: 449px
      }
      .text-pic {
        .text {
          width: 305px;
          padding: 20px;
          margin: 0 auto;
          background: #FAFAFA;
          border-radius: 8px;
          font-size: 16px;
          font-weight: 400;
          color: #404040;
          line-height: 36px;
          margin-bottom: 20px;
          text-align: left;
        }
        img {
          width: 305px;
          height: 317px;
        }
      }
    }
  }
  .intelligent-modal {
    width: 100%;
    height: 1304px;
    background: #FFFFFF;
    border-radius: 16px;
    margin-top: 30px;
    text-align: center
    .intelligent-modal-pic {
      width: 1160px;
      height: 1222px;
      cursor: pointer
    }
  }
  .background-plan {
    display:inline-block;
    margin-top: 30px
    .program-background {
      float: left;
      width: 470px;
      height: 590px;
      background: #FFFFFF;
      border-radius: 16px;
      margin-right: 20px;
      text-align: center
      .background-info {
        width: 430px;
        height: 508px;
        background: #FAFAFA;
        border-radius: 8px;
        padding: 20px 20px;
        font-size: 16px;
        font-weight: 400;
        color: #404040;
        line-height: 36px;
        display: inline-block;
        span {
          color: #101010;
          font-weight: bold
        }
      }
    }
    .course-plan {
      float: left;
      width: 710px;
      height: 590px;
      background: #FFFFFF;
      border-radius: 16px;
      .plan {
        margin: 0 20px 20px
        .s-title {
          width: 670px;
          height: 42px;
          background: #F7F9FF;
          border-radius: 8px;
          border: 1px solid #4676FE;
          font-size: 18px;
          font-weight: 500;
          color: #4676FE;
          line-height: 42px;
          text-indent: 20px
        }
        .plan-info {
          margin-top: 10px;
          background: #FAFAFA;
          border-radius: 8px;
          font-size: 16px;
          font-weight: 400;
          color: #404040;
          line-height: 36px;
          padding: 20px 20px;
        }
        .plan-pic {
          margin-top: 20px;
          border-top: 1px solid #F1F1F1;
          padding-top: 20px
          img {
            width: 670px;
            height: 303px;
          }
        }
      }
    }
  }
  .Industry-courses {
    width: 100%;
    height: 824px;
    background: #FFFFFF;
    border-radius: 16px;
    margin-top: 30px;
    text-align: center
    .Industry-courses-pic {
      width: 1160px;
      height: 742px
    }
  }
  .milestore-plan {
    margin-top: 30px;
    background: #FFFFFF;
    border-radius: 16px;
    .milestore-intro {
      padding: 30px 20px;
      margin: 0 20px;
      background: #FAFAFA;
      border-radius: 8px;
      font-size: 16px;
      font-family: SourceHanSansCN-Regular, SourceHanSansCN;
      font-weight: 400;
      color: #404040;
      line-height: 36px;
    }
    .milestore-pic {
      width: 100%;
      margin-top: 30px;
      padding-bottom: 20px;
      img {
        width: 100%;
        height: 108px
      }
    }
  }
}
</style>